<template>
  <div class="mulit-invite-main">
    <div class="mulit-invite-top-head">
      <div class="head-title">
        批量群邀请
        <span class="alert-content">
          <span
            >功能特色：把一个人拉进多个群，如需把多个人拉进一个群，请前往
            <span style="color: #3070ff">批量拉群</span></span
          >
        </span>
      </div>
      <!-- <div class="header-right">
        <el-button size="small" @click="dialogVisible = true"
          >批量设置</el-button
        >
      </div> -->
    </div>
    <div class="mulit-invite-container">
      <div class="mulit-invite-tabs">
        <div class="custom-tabs">
          <div
            :class="['tab-item', dateType === 1 && 'active']"
            @click="onChangeDateType(1)"
          >
            近2周记录
          </div>
          <div
            :class="['tab-item', dateType === 2 && 'active']"
            @click="onChangeDateType(2)"
          >
            2周前记录
          </div>
        </div>
      </div>
      <div class="mulit-invite-head">
        <div :class="['search-filter', dateType === 2 && 'gap-column']">
          <el-button
            type="primary"
            plain
            size="small"
            v-if="dateType === 1"
            @click="onNavigationTo('/communityOperation/mulit-invite/add')"
          >
            <i class="el-icon-plus el-icon--left"></i>新建任务
          </el-button>
          <el-button
            type="primary"
            plain
            size="small"
            class="icon-button"
            v-if="dateType === 1"
            @click="showEditSendSettings = true"
          >
            <i class="el-icon-setting"></i>
          </el-button>
          <el-select v-model="form.account" placeholder="全部" size="small">
            <el-option
              v-for="item in accountList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="form.task" placeholder="任务状态" size="small">
            <el-option
              v-for="item in taskList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            class="search-input"
            size="small"
            placeholder="搜任务"
            suffix-icon="el-icon-search"
          />
        </div>
      </div>
      <div class="content-wrap">
        <div class="left">
          <div class="list-wrap" v-if="dateType === 1">
            <div class="task-list">
              <div class="task-item" v-for="(i, index) in 4" :key="index">
                <div class="task-bd">
                  <div class="info">
                    <div class="task-icon">
                      <img
                        class="status-img"
                        src="@/assets/images/quxiao.png"
                      />
                    </div>
                    <div class="info-text">
                      <div class="title line_h_22">22222222</div>
                      <span class="line_h_22">已选：0客户 1企业成员</span>
                    </div>
                  </div>
                  <div class="actions">
                    <div class="space-flex">
                      <span style="color: rgba(0, 0, 0, 0.45)">已取消</span>
                      <el-dropdown>
                        <i class="el-icon-more more-icon"></i>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>复制（全部对象）</el-dropdown-item>
                          <el-dropdown-item
                            >复制（仅未发送对象）</el-dropdown-item
                          >
                          <el-dropdown-item>复制（仅内容）</el-dropdown-item>
                          <el-dropdown-item>修改分组</el-dropdown-item>
                          <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <div class="account-info">
                    ID:18691191<span style="margin-left: 4px">主账号创建</span>
                  </div>
                  <div class="time">2024-03-21 11:27</div>
                </div>
              </div>
            </div>
          </div>
          <div class="empty-content" v-else>
            <img class="empty-cover" src="@/assets/images/market_empty.png" />
            <p>暂无任务，请创建</p>
          </div>
        </div>
        <div class="right">
          <div class="wrap" v-if="dateType === 1">
            <div class="task-info">
              <div class="title">22222222222</div>
              <div class="task-info-tags">
                <div class="taskstatus f-12 flexcenter br_4 warn_border mr-8">
                  主账号下发
                </div>
                <div class="taskstatus f-12 c_fff flexcenter br_4 finsh">
                  等待中
                </div>
                <!-- <div class="taskstatus f-12 c_fff flexcenter br_4 warn">等待中</div> -->
                <!-- <div class="task-item">单次定时群发消息任务</div>
                <div class="task-item" style="background-color: rgba(0, 0, 0, 0.25);color: #fff;">已取消</div> -->
              </div>
            </div>
            <div class="card-info-list flex">
              <div class="cardlist_item">
                <div class="w_full mb-12">创建时间：2024-04-11 14:12</div>
                <div class="w_full mb-12">开始时间：2024-04-11 14:12</div>
                <div class="w_full mb-12">结束时间：--</div>
              </div>
              <div class="cardlist_item">
                <div class="w_full mb-12">
                  <span class="itemtitle"> 目标群条件：</span
                  ><span
                    class="commhover c_primary"
                    @click="handleDetail('目标群', 1)"
                    >查看</span
                  >
                </div>
                <div class="w_full mb-12">
                  <span class="itemtitle"> 入群前引导语：</span
                  ><span
                    class="commhover c_primary"
                    @click="handleDetail('入群前引导语', 2)"
                    >查看</span
                  >
                </div>
                <div class="w_full mb-12">
                  <span class="itemtitle"> 拉群对象：</span>
                  <span
                    class="commhover c_primary"
                    @click="handleDetail('拉群对象', 3)"
                    >查看</span
                  >
                </div>
              </div>
            </div>
            <div class="flexbetween mb-16">
              <div class="f-16 fw-6">群进度</div>
              <div>
                <el-select
                  v-model="form.task"
                  placeholder="任务状态"
                  size="small"
                  style="width: 120px"
                  class="mr-10"
                >
                  <el-option label="已处理（0）" :value="1"></el-option>
                  <el-option label="未处理（2）" :value="1"></el-option>
                </el-select>
                <el-input
                  class="search-input"
                  size="small"
                  placeholder="搜群名"
                  style="width: 140px"
                />
              </div>
            </div>

            <el-table v-loading="loading" :data="tableList" ref="multipleTable">
              <el-table-column label="企微号" prop="userName" min-width="160">
                <template slot-scope="scope">
                  <div class="flex kh_box aligncenter">
                    <img
                      src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                      alt=""
                      class="useravatar"
                    />
                    <div class="khnamebox flex pl-12">
                      <div class="title c_222333">
                        {{ scope.row.name || "--" }}
                      </div>
                      <div class="c_warning2 f-12">@锐行</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="拉群进度"
                prop="userName"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.number || 0 }} / {{ scope.row.number1 || 0 }}
                </template>
              </el-table-column>
              <el-table-column
                label="发送状态"
                prop="userName"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.status }} 暂停中
                </template>
              </el-table-column>
              <template slot="empty">
                <TableEmpty
                  :imgsrc="require('@/assets/images/empty1.png')"
                  width="90px"
                />
              </template>
            </el-table>
          </div>
          <!-- <div class="empty-content">
            <img class="empty-cover" src="@/assets/images/peiyNU.png" />
          </div> -->
        </div>
      </div>
    </div>
    <SendSettingDialog :visableIf.sync="showEditSendSettings" />
    <AutoExceptionsDialog
      :visible="autoExceptionVisible"
      @handCloseDialog="onHandCloseAutoExceptionDialog"
    />
    <SendRequireDialog
      :visible="sendRequireVisible"
      @handCloseDialog="onHandClosesendRequireDialog"
    />
    <!-- 目标群条件 -->
    <info-detail v-if="showinfo" :visableIf.sync="showinfo" :title="title" />
    <!-- 入群前引导语 -->
    <InfoWelcomMsg v-if="showmsg" :visableIf.sync="showmsg" />
    <!-- 拉群对象 -->
    <InfoGroupTable v-if="showgroup" :visableIf.sync="showgroup" />
  </div>
</template>
<script>
import SendSettingDialog from "./components/sendSettingDialog";
import AutoExceptionsDialog from "./components/autoExceptionsDialog";
import SendRequireDialog from "./components/SendRequireDialog";
import InfoDetail from "./components/InfoDetail.vue";
import InfoWelcomMsg from "./components/InfoWelcomMsg.vue";
import InfoGroupTable from "./components/InfoGroupTable.vue";
export default {
  data() {
    return {
      actived: 0,
      dateType: 1,
      form: {
        value: "",
        account: "",
        type: "",
        task: "",
        dateTime: "",
      },
      options: [
        {
          options: [
            {
              value: "Shanghai",
              label: "默认分组",
            },
          ],
        },
        {
          options: [
            {
              value: "Chengdu",
              label: "分组管理",
            },
          ],
        },
      ],
      accountList: [
        { value: "", label: "全部" },
        { value: "1", label: "主账号" },
        { value: "2", label: "员工1" },
        { value: "3", label: "员工2" },
      ],
      typeList: [
        { value: "0", label: "即时群发消息" },
        { value: "1", label: "即时群发公告" },
        { value: "2", label: "单次定时群发消息" },
        { value: "3", label: "单次定时群发公告" },
        { value: "4", label: "每日循环消息" },
        { value: "5", label: "每日循环公告" },
        { value: "6", label: "每周循环公告" },
      ],
      taskList: [
        { value: "", label: "全部" },
        { value: "1", label: "创建中" },
        { value: "2", label: "等待中" },
        { value: "3", label: "发送中" },
        { value: "4", label: "已完成" },
        { value: "5", label: "暂停中" },
        { value: "6", label: "已取消" },
      ],
      infoList: [
        { id: 1, label: "创建人：", value: "主账号" },
        { id: 2, label: "创建时间：", value: "2024-02-26 11:27" },
        { id: 3, label: "开始时间：", value: "2024-03-21 11:27" },
        { id: 4, label: "结束时间：", value: "2024-02-27 13:41" },
        {
          id: 5,
          label: "群发对象条件：",
          value: "查看",
          onfunc: () => {
            this.sendRequireVisible = true;
          },
        },
        { id: 6, label: "单向好友：", value: "不发送" },
        { id: 7, label: "分组：", value: "不分组" },
        {
          id: 8,
          label: "异常自动处理：",
          value: "查看",
          onfunc: () => {
            this.autoExceptionVisible = true;
          },
        },
      ],
      tabsValue: "1",
      tableData: [],
      showEditSendSettings: false,
      autoExceptionVisible: false,
      sendRequireVisible: false,
      loading: false,
      tableList: [],
      showinfo: false,
      title: "",
      showmsg: false,
      showgroup: false,
    };
  },
  components: {
    SendSettingDialog,
    AutoExceptionsDialog,
    SendRequireDialog,
    InfoDetail,
    InfoWelcomMsg,
    InfoGroupTable,
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path);
    },
    onHandCloseAutoExceptionDialog() {
      this.autoExceptionVisible = false;
    },
    onHandClosesendRequireDialog() {
      this.sendRequireVisible = false;
    },
    onChangeDateType(type) {
      this.dateType = type;
    },

    handleDetail(title, type) {
      if (type == 1) {
        this.title = title;
        this.showinfo = true;
      }
      if (type == 2) {
        this.showmsg = true;
      }
      if (type == 3) {
        this.showgroup = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mulit-invite-main {
  .mulit-invite-top-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .head-title {
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;
      .alert-content {
        padding: 0 10px;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .divider {
      margin: 0 20px;
      width: 1px;
      height: 16px;
    }
  }
  .mulit-invite-container {
    padding: 16px;
    height: calc(100vh - 48px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    .mulit-invite-tabs {
      height: 46px;
      background: #fff;
      border-bottom: 1px solid #e9e9e9;
      position: sticky;
      top: 0;
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 20px;
      .custom-tabs {
        display: flex;
        align-items: center;
        height: 100%;
        .tab-item {
          position: relative;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 500;
          padding: 12px 0;
          color: rgba(0, 0, 0, 0.65);
          cursor: pointer;
          &:hover {
            color: #5993ff;
          }
          &.active {
            color: #3070ff;
            text-shadow: 0 0 0.25px currentColor;
            &::after {
              content: "";
              position: absolute;
              bottom: -1px;
              left: 0;
              right: 0;
              width: 100%;
              height: 2px;
              background: #3070ff;
            }
          }
          &:not(:first-child) {
            margin-left: 32px;
          }
        }
      }
    }
    .mulit-invite-head {
      background-color: #fff;
      border-bottom: 1px solid #f0f0f0;
      padding: 12px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      .search-filter {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 104px 31px 100px 100px 172px;
        column-gap: 8px;
        &.gap-column {
          grid-template-columns: 100px 100px 172px;
        }
        .icon-button {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 0 !important;
        }
      }
    }
    .content-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-grow: 1;
      height: calc(100% - 46px);
      overflow: hidden;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      .left {
        width: 390px;
        height: 100%;
        background: #f3f3f3;
        border-right: 1px solid #e9e9e9;
        position: relative;
        &::before {
          position: absolute;
          left: 0;
          top: 0;
          content: "";
          width: 6px;
          height: 100%;
          background-color: #fff;
        }
        .list-wrap {
          height: 100%;
          overflow: auto;
          padding-left: 12px;
          padding-top: 12px;
          padding-bottom: 20px;
          .task-list {
            box-sizing: border-box;
            width: 364px;
            .task-item {
              width: 100%;
              padding: 12px;
              margin-bottom: 8px;
              background: #fff;
              border-radius: 4px;
              border: 1px solid #fff;
              cursor: pointer;
              .task-bd {
                width: 100%;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                .info {
                  flex: 1 1;
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;
                  .task-icon {
                    position: relative;
                    width: 48px;
                    height: 48px;
                    margin-right: 12px;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .status-img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .info-text {
                    flex: 1 1;
                    overflow: hidden;
                    .title {
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-weight: 700;
                      color: #000;
                      max-width: 180px;
                      font-size: 14px;
                    }
                    span {
                      display: block;
                      max-width: 200px;
                      font-size: 12px;
                      color: rgba(0, 0, 0, 0.45);
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
                .actions {
                  .space-flex {
                    display: flex;
                    align-content: center;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.45);
                    gap: 5px;
                    .more-icon {
                      font-size: 10px;
                    }
                  }
                }
              }
              .footer {
                position: relative;
                margin-top: 12px;
                padding: 4px 0;
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.45);
                line-height: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .account-info {
                  border: 1px solid #f0f0f0;
                  border-radius: 4px;
                  color: rgba(0, 0, 0, 0.85);
                  padding: 4px 10px;
                  font-size: 12px;
                  font-weight: 400;
                  line-height: 20px;
                }
                .time {
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.45);
                  line-height: 20px;
                }
              }
            }
          }
        }
        .empty-content {
          height: calc(100vh - 250px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .empty-cover {
            width: 48px;
            height: 48px;
          }
          p {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.25);
          }
        }
      }
      .right {
        flex: 1 1;
        background: #fff;
        align-self: stretch;
        overflow-y: hidden;
        position: relative;
        height: 100%;
        padding: 20px 20px 50px;
        .task-info {
          height: 100%;
          overflow-y: auto;
          .title {
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
          .task-info-tags {
            display: flex;
            align-items: center;
            .taskstatus {
              padding: 2px 7px;
              line-height: 24px;
              background-color: #3070ff;
              &.warn {
                background-color: #ff8243;
              }
              &.warn_border {
                background-color: #fff7e6;
                border: 1px solid #ffd591;
                color: #d46b08;
              }
              &.finsh {
                background-color: #00c270;
              }
            }
          }
        }
        .card-info-list {
          background-color: #f3f3f3;
          border-radius: 4px;
          margin: 12px 0 20px;
          padding: 12px 12px 0;
          .cardlist_item {
            width: 260px;
          }
          .itemtitle {
            display: inline-block;
            width: 100px;
          }
        }
        .tab-bar {
          position: relative;
          .tab-msg {
            background: #f3f3f3;
            border: 1px solid #e9e9e9;
            padding: 20px 0;
            .chat-list {
              .chat-item {
                display: flex;
                align-items: center;
                min-height: 60px;
                padding: 10px;
                .serial-number {
                  margin-left: 20px;
                  width: 20px;
                  height: 20px;
                  line-height: 20px;
                  font-size: 12px;
                  background: #ddd;
                  border-radius: 50%;
                  display: inline-block;
                  text-align: center;
                }
                .chat-text {
                  margin-left: 12px;
                  padding: 6px 12px;
                  font-size: 15px;
                  color: #000;
                  background: #fff;
                  border: 1px solid #e9e9e9;
                  border-radius: 5px;
                }
              }
            }
          }
          .absolute-export-btn {
            position: absolute;
            top: 0;
            right: 0px;
          }
          .tips {
            margin-bottom: 20px;
          }
          .tabs-card {
            padding: 12px;
            margin-bottom: 12px;
            background: rgb(245, 245, 245);
            display: flex;
            .card-item {
              color: rgba(0, 0, 0, 0.65);
              font-size: 14px;
              line-height: 22px;
              background: #fff;
              border-radius: 4px;
              padding: 8px 24px;
              margin: 0 8px;
              .title {
                color: rgba(0, 0, 0, 0.45);
                margin-bottom: 4px;
                font-size: 14px;
                line-height: 22px;
                i {
                  margin-left: 8px;
                  font-size: 16px;
                }
              }
              .count {
                margin-top: 4px;
                margin-bottom: 10px;
                font-size: 24px;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.85);
                width: 150px;
              }
            }
          }
        }
        .empty-content {
          margin: 150px 8px;
          font-size: 14px;
          line-height: 1.5715;
          text-align: center;
          .empty-cover {
            width: 100px;
            height: 100px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
  ::v-deep .el-table--border th.el-table__cell,
  ::v-deep .el-table td.el-table__cell {
    border-bottom: none !important;
  }
  ::v-deep .el-table--border .el-table__cell {
    border-right: none !important;
  }
  ::v-deep .el-table--group,
  .el-table--border {
    border: none !important;
  }
}
</style>